<template>
<!--  <div>-->
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :xl="6" :lg="7">
        <div class="login-form">
          <h2>复旦大学教务服务系统</h2>
          <el-image
              style="width: 180px; height: 180px"
              :src="require('@/assets/logo.png')"
          ></el-image>
          <p>
            Hello!
          </p>
        </div>
      </el-col>

      <el-col :span="1">
        <el-divider direction="vertical"></el-divider>
      </el-col>

      <el-col :xl="6" :lg="7">
        <el-form label-position="right" :rules="rules" label-width="80px" :model="loginForm" ref="loginForm">
<!--          <el-form-item label="身份" prop="identity">-->
<!--            <el-radio-group v-model="loginForm.identity" style="width: 260px;">-->
<!--              <el-radio label="管理员" name="ident" value="admin" ></el-radio>-->
<!--              <el-radio label="教师" name="ident" value="teacher" ></el-radio>-->
<!--              <el-radio label="学生" name="ident" value="stu" ></el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
          <el-form-item label="用户名" prop="username" style="width: 380px;">
            <el-input v-model="loginForm.username" @input="change($event)"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="width: 380px;">
            <el-input type="password" v-model="loginForm.password" @input="change($event)"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
            <el-button @click="getPass">忘记密码？</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
<!--  </div>-->
</template>

<script>
  import qs from 'qs'
  export default {
    name: "Login",
    data() {
      return {
        loginForm: {
          identity: "",
          username: '',
          password: '',
          token: '',
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          // identity: [
          //   { required: true, message: '请选择身份', trigger: 'blur' }
          // ]
        },
      }
    },

    methods: {
      //强制刷新解决input无法输入问题
      change(){
        this.$forceUpdate();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/login?'+qs.stringify(this.loginForm)).then(res => {
              //返回的信息
              console.log(res.data)
              // 将jwt存储到应用store中
              const jwt = res.headers['authorization']
              this.$store.commit("SET_TOKEN", jwt)
              if(res.status === 200) {
                this.getIdentity();
                // this.$router.push("/loading")
              }
              else {
                alert ('error submit!!');
                return false;
              }
            })
          }
          else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getPass() {
        this.$message("这个功能还没有开启");
      },
      //判断身份
      getIdentity() {
        this.$axios.get("/sys/userInfo").then(res => {
          this.userRole = res.data.data.userRole;
          this.password = res.data.data.password;
          this.statu = res.data.data.statu;
          console.log(res.data.data);
          if(this.statu === "毕业/离职"){
            this.$message({
              showClose: true,
              message: '已毕业/离职，无法登录',
              type: 'warning',
            })
          }else if(this.userRole === "学生"){
            if(this.loginForm.password === "123456"){
              this.$router.push("/student/ChangePassword");
              this.$message({
                showClose: true,
                message: '请修改初始密码',
                type: 'warning',
              })
            }else{
              this.$router.push("/student")
            }
          }else if(this.userRole === "教师"){
            if(this.loginForm.password === "123456"){
              this.$router.push("/teacher/ChangePassword")
              this.$message({
                showClose: true,
                message: '请修改初始密码',
                type: 'warning',
              })
            }else{
              this.$router.push("/teacher")
            }
          }else{
            this.$router.push("/admin")
          }
        })
      },
    },
  }
</script>

<style scoped>
  .el-col {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
  }
  .el-row {
    height: 100%;
    background-color: #fafafa;
  }
  /*分割线*/
  .el-divider {
    height: 200px;
  }
  .captchaImg {
    float: left;
    margin-left: 8px;
    border-radius: 4px;
  }
</style>